<template>
  <div class="loading-example p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4 text-primary">加载动画示例</h2>
    
    <div class="flex flex-wrap gap-4 mb-6">
      <button 
        @click="showLoading"
        class="px-4 py-2 bg-primary text-white rounded hover:bg-opacity-90 transition-colors"
      >
        显示全局加载 (3秒)
      </button>
      
      <button 
        @click="makeApiRequest"
        class="px-4 py-2 bg-secondary text-white rounded hover:bg-opacity-90 transition-colors"
      >
        发起API请求
      </button>
    </div>
    
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
      <h3 class="font-medium mb-2 text-gray-800 dark:text-gray-200">使用说明</h3>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
        全局加载动画可以通过以下方式使用：
      </p>
      <ul class="list-disc pl-5 text-sm text-gray-600 dark:text-gray-300 space-y-1">
        <li>在API请求中自动显示（默认行为）</li>
        <li>通过组件实例手动控制（this.$loading）</li>
        <li>通过导入LoadingService直接使用</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
import { API } from '../api';

const { proxy } = getCurrentInstance();

// 手动显示加载动画
const showLoading = () => {
  // 使用全局加载服务
  proxy.$loading.show();
  
  // 3秒后隐藏
  setTimeout(() => {
    proxy.$loading.hide();
  }, 3000);
};

// 发起API请求（自动显示加载动画）
const makeApiRequest = async () => {
  try {
    // API请求会自动显示和隐藏加载动画
    await API.getProjects();
  } catch (error) {
    console.error('API请求失败:', error);
  }
};
</script>